<template>
  <view class="home-container planet-bg">
    <!-- 星空背景 -->
    <view class="stars">
      <view v-for="star in stars" :key="star.id" class="star" :style="star.style"></view>
    </view>
    
    <!-- 顶部信息 -->
    <view class="header">
      <view class="user-info" v-if="userInfo">
        <image class="avatar" :src="userInfo.avatar || '/static/logo.png'" mode="aspectFill"></image>
        <text class="username">{{ userInfo.nickname || '星际访客' }}</text>
      </view>
      <view class="user-info" v-else>
        <image class="avatar" src="/static/logo.png" mode="aspectFill"></image>
        <text class="username" @tap="goToLogin">请登录</text>
      </view>
      <view class="stats">
        <text class="stat-item">漂流瓶: {{ bottleStats.total || 0 }}</text>
        <text class="stat-item">星球: {{ planetStats.total || 0 }}</text>
      </view>
    </view>
    
    <!-- 主要功能区 -->
    <view class="main-content">
      <!-- 星球展示区 -->
      <view class="planets-section">
        <text class="section-title">探索星球</text>
        <view class="planets-grid">
          <view class="planet-item" v-for="planet in planets" :key="planet.id" @tap="visitPlanet(planet)">
            <view class="planet-icon" :style="{ backgroundColor: getPlanetColor(planet.id) }">
              <text class="planet-emoji">{{ getPlanetEmoji(planet.id) }}</text>
            </view>
            <text class="planet-name">{{ planet.name }}</text>
            <text class="planet-visitors">{{ planet.visitors }}位访客</text>
          </view>
        </view>
      </view>
      
      <!-- 漂流瓶操作区 -->
      <view class="bottle-actions">
        <view class="action-card" @tap="goToPickBottle">
          <view class="action-icon">🎣</view>
          <text class="action-text">捞取漂流瓶</text>
        </view>
        <view class="action-card" @tap="goToThrowBottle">
          <view class="action-icon">🏺</view>
          <text class="action-text">投放漂流瓶</text>
        </view>
        <view class="action-card" @tap="goToMyBottles">
          <view class="action-icon">📦</view>
          <text class="action-text">我的漂流瓶</text>
        </view>
      </view>
      
      <!-- 最新漂流瓶预览 -->
      <view class="latest-bottles" v-if="latestBottles.length > 0">
        <text class="section-title">最新漂流瓶</text>
        <scroll-view class="bottles-scroll" scroll-x>
          <view class="bottle-preview" v-for="bottle in latestBottles" :key="bottle.id" @tap="viewBottleDetail(bottle)">
            <view class="bottle-content">{{ bottle.content }}</view>
            <view class="bottle-info">
              <text class="bottle-from">来自 {{ bottle.from || '未知星球' }}</text>
              <text class="bottle-time">{{ formatRelativeTime(bottle.time) }}</text>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    
    <!-- 底部导航 -->
    <view class="footer">
      <text class="footer-text">✨ 星球漂流瓶 - 连接宇宙的奇妙缘分 ✨</text>
    </view>
    
    <!-- PLUS会员悬浮按钮 -->
    <view class="plus-member-btn" @tap="showPlusMemberModal">
      <text class="plus-btn-icon">⭐</text>
      <text class="plus-btn-text">PLUS会员领星钻</text>
    </view>
  </view>
</template>

<script>
  import { getUserInfo, formatRelativeTime, formatTime, showToast } from '../../src/common/tools';
  import { isLoggedIn } from '../../src/common/tools';
  import bottleApi from '../../src/api/bottle/bottleApi';
  
  export default {
    data() {
    return {
      userInfo: null,
      planets: [],
      latestBottles: [],
      bottleStats: {
        total: 10000
      },
      planetStats: {
        total: 8
      },
      isLoading: false,
      stars: [] // 存储星星数据
    };
  },
    onLoad() {
      // 初始化星空背景
      this.initStars();
      // 获取用户信息
      this.checkUserLogin();
      // 获取模拟星球数据
      this.loadPlanets();
      // 获取最新漂流瓶
      this.loadLatestBottles();
    },
    onShow() {
      // 每次页面显示时检查用户登录状态
      this.checkUserLogin();
    },
    methods: {
    // 时间格式化方法
    formatRelativeTime,
    formatTime,
    
    // 初始化星空背景
    initStars() {
      const starCount = 150;
      const tempStars = [];
      
      for (let i = 0; i < starCount; i++) {
        // 随机位置
        const x = Math.random() * 100;
        const y = Math.random() * 100;
        
        // 随机动画时长
        const duration = 2 + Math.random() * 3;
        
        // 随机大小
        const size = 1 + Math.random() * 3;
        
        // 随机透明度
        const opacity = 0.3 + Math.random() * 0.7;
        
        tempStars.push({
          id: `star-${i}`,
          style: {
            left: `${x}%`,
            top: `${y}%`,
            width: `${size}rpx`,
            height: `${size}rpx`,
            opacity: opacity,
            '--duration': `${duration}s`
          }
        });
      }
      
      this.stars = tempStars;
    },
      
      // 检查用户登录状态
      checkUserLogin() {
        if (isLoggedIn()) {
          this.userInfo = getUserInfo();
        } else {
          this.userInfo = null;
        }
      },
      
      // 加载模拟星球数据
      loadPlanets() {
        // 模拟星球数据
        this.planets = [
          {
            id: 'earth',
            name: '地球',
            desc: '蓝色星球，生命的摇篮',
            visitors: 1024,
            image: '/static/earth.png'
          },
          {
            id: 'mars',
            name: '火星',
            desc: '红色星球，人类的下一站',
            visitors: 512,
            image: '/static/mars.png'
          },
          {
            id: 'jupiter',
            name: '木星',
            desc: '气态巨行星',
            visitors: 256,
            image: '/static/jupiter.png'
          },
          {
            id: 'saturn',
            name: '土星',
            desc: '拥有美丽光环的行星',
            visitors: 384,
            image: '/static/saturn.png'
          }
        ];
      },
      
      // 加载最新漂流瓶
      async loadLatestBottles() {
        try {
          // 使用模拟数据
          this.latestBottles = [
            {
              id: 'bottle-1',
              content: '来自地球的问候，愿宇宙和平！希望所有生命都能和谐共存，探索宇宙的奥秘。',
              from: '地球',
              time: new Date().toISOString()
            },
            {
              id: 'bottle-2',
              content: '在火星上看地球，它是那么渺小却又那么重要。这颗蓝色星球承载了无数生命和文明的故事。',
              from: '火星',
              time: new Date(Date.now() - 3600000).toISOString()
            },
            {
              id: 'bottle-3',
              content: '希望有一天能在土星的光环下漫步，感受宇宙的壮丽与神秘。每一颗星辰都有属于自己的故事。',
              from: '土星',
              time: new Date(Date.now() - 7200000).toISOString()
            },
            {
              id: 'bottle-4',
              content: '宇宙如此浩瀚，人类如此渺小，但我们的探索精神将永远闪耀，如同夜空中最亮的星。',
              from: '木星',
              time: new Date(Date.now() - 10800000).toISOString()
            }
          ];
        } catch (error) {
          console.error('加载最新漂流瓶失败', error);
          showToast('加载最新漂流瓶失败');
        }
      },
      
      // 获取星球颜色
      getPlanetColor(planetId) {
        const colors = {
          earth: '#45B7D1',
          mars: '#FF6B6B',
          jupiter: '#F7DC6F',
          saturn: '#85C1E9',
          default: '#98D8C8'
        };
        return colors[planetId] || colors.default;
      },
      
      // 获取星球表情符号
      getPlanetEmoji(planetId) {
        const emojis = {
          earth: '🌍',
          mars: '🔴',
          jupiter: '🟡',
          saturn: '🟤',
          default: '⭐'
        };
        return emojis[planetId] || emojis.default;
      },
      
      // 访问星球
      visitPlanet(planet) {
        showToast(`正在前往${planet.name}...`);
        // 这里可以添加星球访问的逻辑
      },
      
      // 跳转到登录页面
      goToLogin() {
        uni.navigateTo({
          url: '/pages/logon/login'
        });
      },
      
      // 跳转到捞取漂流瓶页面
      goToPickBottle() {
        if (!isLoggedIn()) {
          showToast('请先登录');
          this.goToLogin();
          return;
        }
        
        uni.navigateTo({
          url: '/pages/bottle/pick-bottle'
        });
      },
      
      // 跳转到投放漂流瓶页面
      goToThrowBottle() {
        if (!isLoggedIn()) {
          showToast('请先登录');
          this.goToLogin();
          return;
        }
        
        uni.navigateTo({
          url: '/pages/bottle/throw-bottle'
        });
      },
      
      // 跳转到我的漂流瓶页面
      goToMyBottles() {
        if (!isLoggedIn()) {
          showToast('请先登录');
          this.goToLogin();
          return;
        }
        
        uni.navigateTo({
          url: '/pages/bottle/my-bottles-copy'
        });
      },
      
      // 查看漂流瓶详情
      viewBottleDetail(bottle) {
        uni.navigateTo({
          url: `/pages/bottle/bottle-detail?id=${bottle.id}`
        });
      },
      
      // 显示PLUS会员开通弹窗
      showPlusMemberModal() {
        // 创建一个新页面来显示会员开通内容
        uni.navigateTo({
          url: '/pages/bottle/plus-member'
        });
      }
    }
  };
</script>

<style scoped>
  @import '../../src/style/global.scss';
  
  .home-container {
    width: 100%;
    min-height: calc(100vh - 100rpx);
    padding: 40rpx 30rpx 120rpx 30rpx;
    color: var(--white);
    position: relative;
  }
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50rpx;
  }
  
  .user-info {
    display: flex;
    align-items: center;
  }
  
  .avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    background-color: var(--white);
    padding: 5rpx;
    margin-right: 15rpx;
  }
  
  .username {
    font-size: 32rpx;
    font-weight: 500;
  }
  
  .stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  
  .stat-item {
    font-size: 24rpx;
    opacity: 0.8;
  }
  
  .main-content {
    width: 100%;
  }
  
  .section-title {
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    display: block;
  }
  
  .planets-section {
    margin-bottom: 50rpx;
  }
  
  .planets-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20rpx;
  }
  
  .planet-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 15rpx;
    backdrop-filter: blur(5rpx);
  }
  
  .planet-icon {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10rpx;
  }
  
  .planet-emoji {
    font-size: 60rpx;
  }
  
  .planet-name {
    font-size: 28rpx;
    font-weight: 500;
    margin-bottom: 5rpx;
  }
  
  .planet-visitors {
    font-size: 22rpx;
    opacity: 0.7;
  }
  
  .bottle-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20rpx;
    margin-bottom: 50rpx;
  }
  
  .action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30rpx 20rpx;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 15rpx;
    backdrop-filter: blur(5rpx);
    transition: all 0.3s ease;
  }
  
  .action-card:active {
    transform: scale(0.95);
    background-color: rgba(255, 255, 255, 0.2);
  }
  
  .action-icon {
    font-size: 80rpx;
    margin-bottom: 15rpx;
  }
  
  .action-text {
    font-size: 28rpx;
  }
  
  .latest-bottles {
    margin-bottom: 50rpx;
  }
  
  .bottles-scroll {
    white-space: nowrap;
    padding-bottom: 10rpx;
  }
  
  .bottle-preview {
    display: inline-block;
    width: 440rpx;
    max-width: 440rpx;
    margin-right: 20rpx;
    padding: 30rpx;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
    border-radius: 20rpx;
    backdrop-filter: blur(10rpx);
    vertical-align: top;
    border: 1rpx solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
  }
  
  .bottle-preview:active {
    transform: scale(0.98);
    box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1);
  }
  
  .bottle-content {
    font-size: 28rpx;
    margin-bottom: 15rpx;
    line-height: 1.5;
    word-wrap: break-word;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .bottle-info {
    font-size: 24rpx;
    opacity: 0.7;
    display: flex;
    flex-direction: column;
    gap: 5rpx;
  }
  
  .bottle-from {
    display: block;
  }
  
  .bottle-time {
    display: block;
    font-size: 22rpx;
  }
  
  .footer {
    text-align: center;
    padding: 30rpx 0;
  }
  
  .footer-text {
    font-size: 24rpx;
    opacity: 0.7;
  }
  
  /* PLUS会员悬浮按钮样式 */
  .plus-member-btn {
    position: fixed;
    bottom: 180rpx;
    right: 40rpx;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    padding: 20rpx 30rpx;
    border-radius: 50rpx;
    box-shadow: 0 10rpx 30rpx rgba(255, 215, 0, 0.4);
    z-index: 999;
    transition: all 0.3s ease;
    border: 2rpx solid rgba(255, 255, 255, 0.3);
  }
  
  .plus-member-btn:active {
    transform: scale(0.95);
    box-shadow: 0 5rpx 15rpx rgba(255, 215, 0, 0.3);
  }
  
  .plus-btn-icon {
    font-size: 40rpx;
    margin-right: 10rpx;
    animation: twinkle 2s infinite;
  }
  
  .plus-btn-text {
    font-size: 28rpx;
    font-weight: bold;
    color: #fff;
  }
  
  @keyframes twinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
  }
</style>
